<template>
  <div class="requestFrom_page">
    <div class="header_top">申请结果</div>

    <div class="content">
      <img class="col_img" src="../assets/icon_success.png" alt />
      <h2>申请成功！</h2>
      <div class="tips_text">
        申请成功后，<span>务必要联系客服</span>，告知已经完成申请，并记录自己的诉求，确保及时发货。
      </div>
    </div>
    <div class="footer_btn" @click="kefuBtn">联系客服</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { apiGetServiceLink } from '../api';
import { Toast } from 'vant';

const route = useRoute();
let iccid = ref(route.query.iccid);
let phonenumber = ref(route.query.phone);
let id = ref(route.query.id);
let urlPath = ref();
const getKfUrl = async () => {
  if (id.value) {
    try {
      const res = await apiGetServiceLink({ id: id.value, appName: 'ctFlow' });
      if (res.code === 200) {
        urlPath.value = res.data.serviceUrl;
      } else {
        Toast(res.msg ?? '提交失败');
      }
    } catch (error) {
      console.log(error);
    }
  }
};
const kefuBtn = () => {
  let _url = `${urlPath.value}&tel=${phonenumber.value ?? ''}&cardId=${iccid.value ?? ''}`;
  let param = { uid: phonenumber.value ?? '', nickName: phonenumber.value };
  if (_url.includes('customerFields')) {
    _url = _url.replace('customerFields', `&userParams=${JSON.stringify(param)}&customerFields`);
  } else {
    _url += `&userParams=${JSON.stringify(param)}`;
  }
  window.location.href = _url;
};
getKfUrl();
</script>

<style scoped>
.requestFrom_page {
  max-width: 750px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}

.content {
  padding: 100px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.col_img {
  width: 100px;
  height: 100px;
}
.tips_text {
  margin-top: 20px;
  line-height: 30px;
  color: #333;
}
.tips_text span {
  color: #ff6d41;
}
.header_top {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: rgba(51, 51, 51, 1);
  background: #f5f5f5;
}

.h-3 {
  padding: 0 20px;
  width: 100%;
  height: 24px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  vertical-align: top;
}
.footer_btn {
  border-radius: 8px;
  width: 120px;
  line-height: 25px;
  text-align: center;
  margin: 20px auto;
  color: #ff6d41;
  padding: 10px;
  border: 1px solid #ff6d41;
}
</style>
